<!--
 * @Author: huCheng Li
 * @Date: 2023-10-23 10:52:05
 * @description: 
 * @LastEditTime: 2023-10-27 16:57:36
 * @FilePath: \三阶段项目\pili-pili-app\src\pages\video\index.vue
-->
<template>
  <div class="video-box" ref="node">
    <div class="header">
      <van-nav-bar left-text="28人正在观看" left-arrow @click="left">
        <template #right>
          <van-icon name="search" size="18" @click="router.push('/search')" />
          <van-icon name="ellipsis" class="ellipsis" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 视频 -->
    <div class="videos">
      <van-swipe style="height: 220px;" :show-indicators="false" @change="changeEvt" vertical>
        <van-swipe-item v-for="it in list" :key="it.id">
          <div class="my-item">
            <video :src="baseURL + it.src" preload="auto" :id="it.id" muted
              @click="clickEvt(it.id), progress(it.id)"></video>
            <!-- <i class="full"><van-icon name="expand-o" /></i> -->
            <span class="control" v-show="it.showControl" @click="clickEvt(it.id)"><van-icon
                name="play-circle-o" /></span>

            <span v-for="obj in dms" :key="obj.id" :style="{ right: obj.right + 'px', top: obj.top + 'px' }"
              class="dm-info">{{ obj.txt }}</span>
          </div>
          <div class="progress"><van-progress pivot-text="^_^" color="@g05" stroke-width="2px" track-color="@g04"
              :percentage="lengths" />
          </div>
        </van-swipe-item>
      </van-swipe>

    </div>
    <!-- 下方图标群 -->
    <div class="icons">

      <van-icon name="good-job-o" />
      <p>269</p>
      <van-icon name="chat-o" />
      <p>269</p>
      <van-icon name="gold-coin-o" />
      <p>269</p>
      <van-icon name="star-o" />
      <p>269</p>
      <van-icon name="share-o" />
      <p>269</p>
    </div>

    <!-- 下左方的视频信息 -->
    <div class="info">
      <div class="head-img">
        <img src="../../images/22_open.4ea5f239.png" alt="">
        <span class="titles">热心up</span>
        <span class="concern">+关注</span>
        <br>
        <span class="fans">56.4万粉丝</span>
      </div>
      <div class="desc">

        <span class="zan">6千点赞</span>
        <p>这放在三年后也是相当炸裂的!</p>

      </div>
      <div class="Progress-bar">
        <!-- <van-progress color="@b3" :percentage="28" /> -->
      </div>
      <div class="bullet">

        <van-field label="文本" left-icon="smile-o" right-icon="eye-o" placeholder="我要吐槽" @click="show = true">
        </van-field>

      </div>
      <van-dialog v-model:show="show" title="吐槽" @confirm="sends" show-cancel-button>
        <van-field v-model="dmInfo" rows="3" autosize placeholder="输入弹幕内容" type="textarea" maxlength="100"
          show-word-limit />
      </van-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
/** 全局变量 */
const baseURL = window.baseURL;
import { Ref } from "vue";
import { ref } from "vue";
import { Router, useRouter } from "vue-router";
import { videosApi } from "../../apis/userApis";
import { showToast } from "vant";
import { onBeforeUnmount } from "vue";
const router: Router = useRouter()
interface ListInf {
  "id": string;
  "name": string;
  "comments": number;
  "likes": number;
  "src": string;
  showControl: boolean;
}
const list: Ref<Array<ListInf>> = ref([])
videosApi().then((d: any) => {
  if (d.code == 200) {
    list.value = d.data.map((it: any) => {
      return it
    })

  }
})
//弹幕弹出功能
const node: Ref<HTMLDivElement> = ref() as Ref<HTMLDivElement>;
interface Dminf {
  top: number;
  right: number;
  txt: string;
  id: string;
}


//弹幕动画
const dms: Ref<Array<Dminf>> = ref([])
let times = setInterval(function () {
  let _dest = node.value.clientWidth;
  let _list: Array<Dminf> = [];
  for (let it of dms.value) {
    let _it: Dminf = JSON.parse(JSON.stringify(it))
    _it.right += 2
    if (_it.right < _dest) {
      _list.push(_it)
    }
  }
  dms.value = _list
  // console.log(dms.value);
}, 30)
onBeforeUnmount(function () {
  clearInterval(times)
})
// 弹幕输入功能
const show: Ref<boolean> = ref(false)
const dmInfo: Ref<string> = ref("")
function sends() {
  if (!dmInfo.value) {
    showToast('还没有输入呢!')
    return
  }
  show.value = false
  dms.value.push({
    id: Date.now().toString(),
    txt: dmInfo.value,
    top: Math.ceil(Math.random() * 100),
    right: 0 - (dmInfo.value.length * 12)
  })
  dmInfo.value = ""
}
//点击暂停播放
function clickEvt(id: string) {
  // console.log(id);
  // console.log(document.getElementById(id));
  let node: HTMLVideoElement = document.getElementById(id) as HTMLVideoElement;
  let item: ListInf = list.value.find((it: ListInf) => it.id == id) as ListInf;
  // console.log(node.duration);
  // console.log(node.currentTime);
  if (node.paused) {
    node.play()
    item.showControl = false;
  } else {
    node.pause()
    item.showControl = true;
  }
}
//进度条
let lengths: Ref<number> = ref(0)
let timers: Ref<number> = ref(0)
function progress(id: string) {
  // let lengths: Ref<number> = ref(0)
  clearInterval(timers.value)
  timers.value = setInterval(function () {

    let node: HTMLVideoElement = document.getElementById(id) as HTMLVideoElement;
    // console.log(lengths.value);

    lengths.value = node.currentTime / node.duration * 100;

    return lengths.value;
  }, 100)


}
//退出时停止计时器
function left(){
  clearInterval(timers.value)
  router.go(-1)
}


// 防抖
const timer: Ref<number> = ref(0)
function changeEvt(index: number) {
  clearTimeout(timer.value)
  timer.value = setTimeout(function () {
    list.value.forEach((it: ListInf, i: number) => {
      if (index === i) {
        (document.getElementById(it.id) as HTMLVideoElement).play();

        lengths.value = 0;
        progress(it.id);
      } else {
        (document.getElementById(it.id) as HTMLVideoElement).pause();
      }
    });
    dms.value = [];
  }, 30)
}

</script>
<style lang="less" scoped>
@import "../../style/common.less";

.video-box {
  background-color: black;
  height: 842px;

  .control {
    font-size: 50px;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    color: @b5;
  }

  .full {
    position: absolute;
    right: 0;
    top: calc(100% - 29px);
    font-size: 25px;
    color: white;
  }

  .progress {
    position: absolute;
    width: 100%;
    top: calc(100% - 5px);

    :deep(.van-progress) {
      background-color: @b1;
    }

    :deep(.van-progress__pivot) {
      height: 9px;
      // width: 5px;
      font-size: 5px;

    }
  }

  .header {
    background-color: black;
  }

  ::v-deep(.van-nav-bar__text) {
    font-size: 14px;
    margin: 10px 0 10px;

  }

  .dm-info {
    display: block;
    position: absolute;
    top: 20px;
    right: 0vw;
    font-size: 0.6rem;
    color: red;
    white-space: nowrap;
  }

  .ellipsis {
    margin-left: 10px;
    transform: rotate(90deg);
  }

  .icons {
    display: flex;
    margin-top: 5px;
    flex-direction: column;
    position: absolute;
    top: 50%;
    right: 0;
    font-size: 30px;
    color: white;
    margin-right: 5px;

    p {
      font-size: 14px;
      margin: 5px 0 10px;
      text-align: center;
      color: white;
    }
  }

  .info {
    color: white;
    width: 100%;
    position: absolute;
    top: 75%;
    font-size: 14px;

    .head-img {
      height: 42px;
      width: 100%;


      .titles {
        margin: 0 5px;
      }

      .concern {
        background: @b5;
        font-size: 12px;
        padding: 2px 10px;
        border-radius: 10px;
        color: white;
      }

      .fans {
        margin-left: 5px;
        font-size: 14px;
      }

      img {
        float: left;
        width: 42px;
        border-radius: 22px;
        border: 2px solid;
      }
    }

    .desc {
      height: 20px;
      margin: 10px auto;

      .zan {
        background: @b5;
        font-size: 12px;
        padding: 2px 10px;
        border-radius: 10px;
        color: white;
        margin-right: 15px;
        float: left;
      }
    }
  }

  .videos {
    height: 220px;
    // .rel();
    margin-top: 160px;

    :deep(.van-swipe-item) {
      height: 220px;
    }

    .my-item {
      .rel();

      video {
        display: block;
        width: 100%;
        height: 220px;
        position: absolute;
        top: calc(50%-100px);
        background-color: aqua;

      }
    }
  }

  .Progress-bar {
    margin-top: 70px;
    margin-bottom: 12px;
  }

  .bullet {
    color: red;

    :deep(.van-cell) {
      background-color: @g03;
      border-radius: 20px;
    }


  }
}
</style>
